<template>
	<div class="base-content error">
		<div>
			<span class="error-code" style="color: red;">4</span>
			<span class="error-code" style="color: orange;">0</span>
			<span class="error-code" style="color: red;">4</span>
		</div>
		<div style="margin-top: 1em;">
			您所访问的页面不存在或无权访问，将在
			<span class="timer">{{ time }}</span>秒后返回首页
		</div>
		<div style="margin-top: 1em;">
			您也可以点击
			<el-button type="text" @click="back">立即返回</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import {
	ref,
	onMounted
} from 'vue'
import {
	useRoute,
	useRouter,
} from 'vue-router'

let time = ref(10)
let interval: any = null
const router = useRouter();
const back = () => {
	clearInterval(interval)
	router.replace('/')
}
onMounted(() => {
	interval = setInterval(() => {
		time.value--
		if (time.value <= 0) {
			back()
		}
	}, 1000)
})

</script>

<style scoped>
.error {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.error-code {
	font-size: 5em;
	font-weight: bold;
}

.timer {
	font-weight: bold;
	margin: 0 0.5em;
}
</style>
